<template>
  <div class="company-registry">
    <van-header title="公司注册"/>
    <img src="~assets/companyregistration.png"/>
    <section class="need">
      <van-title :border="false" title="你只需提供材料 其它的交给我们"/>
      <ul>
        <li>1、公司法定代表人签署的《公司设立登记申请书》;</li>
        <li> 2、全体股东签署的公司章程;</li>
        <li> 3、法人股东资格证明或者自然人股东身份证及其复印件;</li>
        <li> 4、董事、监事和经理的任职文件及身份证复印件;</li>
        <li> 5、指定代表或委托代理人证明;</li>
        <li> 6、代理人身份证及其复印件;</li>
        <li> 7、住所使用证明。</li>
      </ul>
    </section>
    <section class="process">
      <van-title :border="false" title="注册流程"/>
      <ul>
        <li>
          <img src="~assets/step1.png"/>
          <span>1.资料准备</span>
        </li>
        <li>
          <img src="~assets/step2.png"/>
          <span>2.提交资料</span>
        </li>
        <li>
          <img src="~assets/step3.png"/>
          <span>3.领取执照</span>
        </li>
        <li>
          <img src="~assets/step4.png"/>
          <span>4.刻章</span>
        </li>
      </ul>
    </section>
    <section class="why">
      <van-title :border="false" title="为什么选择我们?"/>
      <ul>
        <li>
          <i>省钱</i>
          <span>全程专业化办理，标准化操作，无隐形收费</span>
        </li>
        <li>
          <i>省时</i>
          <span>复杂的事情交给我们，为您节约更多时间</span>
        </li>
        <li>
          <i>省心</i>
          <span>从注册、报税、税控审批，一条龙服务</span>
        </li>
        <li>
          <i>省力</i>
          <span>一次性准备资料，专人帮您办理，无须劳心劳力</span>
        </li>
      </ul>
    </section>
    <van-footer/>
  </div>
</template>

<script>
  import VanTitle from "../components/van-title";
  import VanFooter from "../components/van-footer";

  export default {
    name: "companyRegistry",
    components: {VanFooter, VanTitle}
  }
</script>

<style scoped lang="less">
  .company-registry {
    > img {
      width: 100%;
      display: block;
    }

    .need {
      margin: 0 8px 0 6px;

      ul {
        margin-top: 31px;
        padding: 29px 0 29px 31px;
        background: #FFFFFF;
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.29);
        border-radius: 5px;

        li {
          font-size: 11px;
          font-weight: 400;
          color: #383536;
          line-height: 21px;
        }
      }
    }

    .process {
      padding-left: 8px;
      padding-bottom: 30px;
      border-bottom: 3px solid #eee;

      ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;

        li {
          width: 178px;
          display: flex;
          flex-direction: column;
          position: relative;

          img {
            width: 100%;
          }

          span {
            height: 34px;
            line-height: 34px;
            background: #767676;
            opacity: 0.55;
            font-size: 11px;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
          }
        }
      }
    }

    .why {
      border-bottom: 3px solid #eee;
      padding: 0 6px 30px 8px;

      ul {
        margin-top: 30px;

        li {
          display: flex;
          height: 45px;
          align-items: center;
          border-top: 1px dotted #9D9C9C;

          &:nth-last-child(1) {
            border-bottom: 1px dotted #9D9C9C;
          }

          i {
            height: 20px;
            width: 47px;
            background: linear-gradient(85deg, #E78A8F 0%, #A71D2D 100%);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            font-style: normal;
          }

          span {
            font-size: 11px;
            font-weight: 500;
            color: #3E3A39;
            margin-left: 9px;
          }
        }
      }
    }
  }
</style>
